<template>
	<div class="playerinformation">
		<el-form label-width="80px" class="searchform">
     
		  <el-form-item label="所属楼栋:">
		    <el-select v-model="searchForm.building" clearable placeholder="请选择">
				<el-option
				v-for="item in buildings"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
  			</el-select>
		  </el-form-item>
		  <el-form-item label="所属楼层:">
		    <el-select v-model="searchForm.floor" clearable placeholder="请选择">
				<el-option
				v-for="item in floors"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
			</el-select>
		  </el-form-item>

		  <el-form-item label="房间号:">
		    <el-input v-model="searchForm.room" clearable placeholder="请输入房间编号"></el-input>
		  </el-form-item>
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		  <el-table
		    :data="tableData"
			:span-method="objectSpanMethod"
		    border
			fit
			stripe=""
			:header-cell-style="{textAlign: 'center'}"
			:cell-style="{ textAlign: 'center' }"
		    style="width: 100%">
			
		    <el-table-column
			type="index"
			align="center"
		      label="序号"
		    >
          </el-table-column>
		
		    <el-table-column
		      prop="building"
		      label="楼栋"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="floor"
		      label="楼层"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="room"
		      label="房间号"
		    >
		    </el-table-column>
			<el-table-column
		      prop="type"
		      label="房间类型"
		    >
		    </el-table-column>
		    		<el-table-column
		      prop="bedId"
		      label="床位号"
			  v-if="false"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="bed"
		      label="床位号"
		    >
		    </el-table-column>
        	<el-table-column
		      prop="bedType"
		      label="床位状态">
		    
		    </el-table-column>
			<el-table-column
		      prop="oldmanId"
		      label="老人编号"
			  v-if="false">
		    </el-table-column>
			<el-table-column
		      prop="oldmanName"
		      label="老人名称">
		    
		    </el-table-column>
		    <el-table-column
		      fixed="right"
			  align="center"
		      label="操作"
		    >
		      <template slot-scope="scope">
					<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
					<!-- <el-button type="text" size="small" @click="del(scope.row)">删除</el-button> -->
				</template>
		    </el-table-column>
		  </el-table>

		  <!-- 分页 -->
		  <div style="text-align:right;">
			  <el-pagination
			background
			layout="prev, pager, next"
			:current-page="pageNum"
			@current-change="changePageNum"
			:total="total">
			</el-pagination>
		  </div>
		  
		<el-dialog title="修改信息" :visible.sync="dialogVisible2" width="400px">
				<el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="床位号" prop="bedId" v-if="false">
						<el-input v-model="editForm.bedId" disabled></el-input>
					</el-form-item>
					<el-form-item label="床位" prop="bed">
						<el-input v-model="editForm.bed" disabled></el-input>
					</el-form-item>
        			<el-form-item label="床位状态" prop="state">
						<el-select @change="changeModel" v-model="editForm.state" placeholder="请选择">
							<el-option
							v-for="item in state"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="老人编号" prop="oldmanId" v-if="dialogFlag">
						<el-input v-model="editForm.oldmanId" oninput="value=value.replace(/\D/g,'')" ></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { Message } from 'element-ui';
	export default{
		name:"VisitList",
		data(){
			return{
					pageNum : 1,
					pageSize : 4,
					currentPage : 1,
					total : 10000,
					rowIndex : 2,
					columnType : -1,
       state:[{
         value : 0,
         label:'空闲中'
       },
       {
         value : 1,
         label:'使用中'
       },
       {
         value : 2,
         label:'已预约'
       }],
       stateg:'',
        buildings: [],
        floors: [{
			value: '1',
			label: '1层'
			}, {
			value: '2',
			label: '2层'
			}, {
			value: '3',
			label: '3层'
        }],
		

		//修改用户信息的表单
		editForm: {
          state : '',
          oldmanId : '',
		  bedId : '',
		  bed : ''
        },ruleForm: {
          state: '',
          oldmanId: '',
        },
        rules: {
          state: [
            { required: true, message: '请选择床位状态', trigger: 'blur' }
          ],
          oldmanId: [
            { required: true, message: '请输入老人编号（数字）', trigger: 'input'}
          ]
        },
				value:"",
				searchForm : {
					building : '',
					floor : '',
					room : ''
				},
				 tableData: [],
				//弹出添加表单
				dialogFormVisible: false,
				form: {
					name: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				//弹出表单结束
				dialogVisible1: false,
				dialogVisible2: false,
				dialogFlag : false,
				userdata:{
					name:'xxx',
					sex:'男'
				},
				editname:""
			}
		},
		mounted(){
			this.loadBuilding(),
			this.search();
		},
		methods:{
			//合并单元框
			// 参数---当前行-----当前列----当前行号-----当前列号------
			objectSpanMethod({ row, column, rowIndex, columnIndex }) {
				if (columnIndex === 1 || columnIndex === 2) {
					if (rowIndex % 4 === 0) {
						return {
							rowspan: 4,
							colspan: 1
						};
					}else{
						return {
							rowspan : 0,
							colspan : 0
						}
					}
				}else if(columnIndex == 3){
					if(rowIndex == this.columnType){
						return {
							rowspan : 1,
							colspan : 1
						}
					}else {
						return {
							rowspan : 1,
							colspan : 1
						}
					}
				}
			},
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			// 修改床位的状态时，触发。
			changeModel(value){
				console.log(value);
				if(value != 0){
					this.dialogFlag = true
				}else{
					this.dialogFlag = false
				}
			},
			// 加载楼栋的名称。
			loadBuilding(){
				this.$axios.get(this.$global.zuulIp + "/bed/findAllBuilding").then(res => {
					for(var i = 0 ; i < res.data.length ;  i ++){
						var data = res.data[i];
						var list = {
							label : data.name,
							value : data.id
						}
						this.buildings.push(list);
					}
				})
			},
			//更改分页页码，进行的处理
			changePageNum(currentPage){
				this.pageNum = currentPage;
				this.search();
			},
			// 分页查询
			search(){
				this.$axios.post(this.$global.zuulIp + "/bed/findRoomByPage", {
					pages : this.pageNum ,
					pageSize : this.pageSize , 
					building : this.searchForm.building == '' ? 100001 : this.searchForm.building, 
					floor : this.searchForm.floor == '' ? 1 : this.searchForm.floor,
					room : this.searchForm.room
				}).then(res => {
					this.tableData = [];
					console.log(res.data);
					this.total = res.data.pages * 10;
					
					for(var i = 0 ; i < res.data.list.length ; i ++){
						var data = res.data.list[i];
						for(var j = 0 ; j < data.bedList.length ; j ++){
							var result = data.bedList[j];
							var list = {
								id : data.id,
								building : data.building.buildingNum + '栋',
								floor : data.floors.floorNum + '层',
								room : data.name + '号',
								type : data.roomType.name,
								bed : data.name  + result.bedNum + '号',
								bedId : result.id,
								bedType :  result.state == 0 ? '空闲中' : result.state == 1 ? '已使用' : '已预约' ,
								oldmanId : result.oldman == null ? '' : result.oldman.id,
								oldmanName : result.oldman == null ? '暂无' : result.oldman.name
				        	}
							this.tableData.push(list);
						}
						if(data.bedList.length == 1){
							this.columnType = (i * 2) + 1;
						}
					}
				})
			},
			handleClose(done) {
				this.dialogVisible1 = false
				this.dialogFlag = false
			},
			//删除
			del(row){
				confirm('是否删除'+row.id)
			},
			//修改
			edit(row){
				this.dialogVisible2 = true
				this.editForm.bedId = row.bedId,
				this.editForm.bed = row.bed,
				this.editForm.oldmanId = row.oldmanId
				if(row.oldmanId != ''){
					this.dialogFlag = true
				}else{
					this.dialogFlag = false
				}
				this.editForm.state = row.bedType == '空闲中' ? 0 : 1
			},
			submitForm(formName) {
        this.$refs[formName].validate((valid) => {
         	if (valid) {
				 console.log(this.editForm.oldmanId + "");
				var urls = this.$global.zuulIp + "/bed/modifyBedTypeOldmanName";
				this.$axios.post(urls, {
					bedId : this.editForm.bedId,
					oldmanId : this.editForm.oldmanId + "",
					state : this.editForm.state,
					type : this.dialogFlag
				}).then(res => {
					console.log(res);
					if(res){
						this.dialogVisible2 = false;
						this.search();
						Message.success('添加成功');
					}else{
						Message.error('添加失败！');
						return false;	
					}
				})
			} else {
				Message.error('添加失败！');
				return false;
			}
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
		}
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
